import React, {useMemo} from 'react';
import {View} from '@tarojs/components';
import './CommodInfo.scss';

//商品接口
interface Commod{
  comId:number,
  imgs?: string[],//轮播图。实际上浙里用不到的
  money: number,  //实际售价
  falseMoney: number, //虚假售价
  name: string,    //产品名称
  group: string, //商品分组
  sellMethod: string,          //售卖方式
  distributionMethod: string,    //配送方式
  spec: string,       //商品规格
  stock:number   //库存
}

interface ICommodInfoProps {
  Commod:Commod
}

const ComInfo: React.FC<ICommodInfoProps> = (props) => {
  const {
    money,
    falseMoney,
    name,
    group,
    spec,
    sellMethod,
    distributionMethod,
    stock
  } = props.Commod;

  //对库存进行处理
  const stockFun = useMemo(():string | number => {
    if(stock > 9999){
      const stockComConst = String(stock).slice(0,String(stock).length-4);
      const stockComFloat = String(stock).slice(String(stock).length-4,String(stock).length-3);
      return `${stockComConst}.${stockComFloat}万件`;
    }else{
      return stock + '件';
    }
  },[stock])

  return (
    <View className='infoDetails'>
      <View className='moneySection'>
        ￥{money}
        <View className='smallMoney'>￥{falseMoney}</View>
      </View>
      <View className='infoItem'>
        <View className='key'>商品名称</View>
        <View className='value'>{name}</View>
      </View>
      <View className='infoItem'>
        <View className='key'>商品分组</View>
        <View className='value'>{group}</View>
      </View>
      <View className='infoItem'>
        <View className='key'>商品规格</View>
        <View className='value'>{spec}</View>
      </View>
      <View className='infoItem flexBetween'>
        <View className='flexBetween'>
          <View className='key'>售卖方式</View>
          <View className='value'>{sellMethod}</View>
        </View>
        <View className='flexBetween'>
          <View className='key' style='min-width:10px'>剩余</View>
          <View className='value' style='color:#969799'>{stockFun}</View>
        </View>
      </View>
      <View className='infoItem'>
        <View className='key'>配送方式</View>
        <View className='value'>{distributionMethod}</View>
      </View>
    </View>
  )
}

//商品信息组件
export default ComInfo;

